<template>
	<view>
		<view>
			<video
				src="https://vd2.bdstatic.com/mda-ka9n5ii574eyjkue/sc/mda-ka9n5ii574eyjkue.mp4?v_from_s=hkapp-haokan-hbe&auth_key=1668646380-0-0-8ec99016c0b40cd782e46ac37642f36c&bcevod_channel=searchbox_feed&pd=1&cd=0&pt=3&logid=1380056890&vid=7510050275047112570&abtest=104960_1-104959_2-105917_2&klogid=1380056890"
				style="width: 100%;height: 400rpx;"></video>
		</view>
		<view class="title">
			<view class="ziRan">
				大自然的魅力....
			</view>
			<view class="pai">
				<view class="bo">
					1.0万播放
				</view>
				<view class="zan">
					<image src="../../static/image/赞.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="xi">
			<view class="img1">
				<image
					src="">
				</image>
				<view>
					<view>
						大河网
					</view>
					<view>
						11/15 15:00
					</view>
				</view>
			</view>
			<view class="guan">
				<button size="mini" type="warn">+关注</button>
			</view>
		</view>
		<view class="xian">
		</view>
		<view style="margin: 20rpx;font-size: 36rpx;">
			为你推荐
		</view>
		<view class="rog">
			<view class="rog1">
				<image src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F5242ebe22e515c20641766ba1a74373d1786468b1314-2yxIh0_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1671237840&t=e35dd13433b9c82601616ed5ec669be7" mode=""></image>
			</view>
			<view class="rog2">
				<view class="">
					来人间一趟 你要看看太阳。 --海底
					来人间一趟 你要看看太阳。 --海底.....
				</view>
				<view class="z">
					<view>
						动物大观察
					</view>
					<view>
						5.3万次播放
					</view>
				</view>
				
			</view>
		</view>
		<view class="rog">
			<view class="rog1">
				<image src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F5242ebe22e515c20641766ba1a74373d1786468b1314-2yxIh0_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1671237840&t=e35dd13433b9c82601616ed5ec669be7" mode=""></image>
			</view>
			<view class="rog2">
				<view class="">
					来人间一趟 你要看看太阳。 --海底
					来人间一趟 你要看看太阳。 --海底.....
				</view>
				<view class="z">
					<view>
						动物大观察
					</view>
					<view>
						5.3万次播放
					</view>
				</view>
				
			</view>
		</view>
		<view class="rog">
			<view class="rog1">
				<image src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F5242ebe22e515c20641766ba1a74373d1786468b1314-2yxIh0_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1671237840&t=e35dd13433b9c82601616ed5ec669be7" mode=""></image>
			</view>
			<view class="rog2">
				<view class="">
					来人间一趟 你要看看太阳。 --海底
					来人间一趟 你要看看太阳。 --海底.....
				</view>
				<view class="z">
					<view>
						动物大观察
					</view>
					<view>
						5.3万次播放
					</view>
				</view>
				
			</view>
		</view>
		<view class="rog">
			<view class="rog1">
				<image src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F5242ebe22e515c20641766ba1a74373d1786468b1314-2yxIh0_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1671237840&t=e35dd13433b9c82601616ed5ec669be7" mode=""></image>
			</view>
			<view class="rog2">
				<view class="">
					来人间一趟 你要看看太阳。 --海底
					来人间一趟 你要看看太阳。 --海底.....
				</view>
				<view class="z">
					<view>
						动物大观察
					</view>
					<view>
						5.3万次播放
					</view>
				</view>
				
			</view>
		</view>
		<view class="botton">
			<view class="jj">
				<view>
					<image src="../../static/image/向左.png"></image>
				</view>
				<view>
					<input type="text" placeholder="我来说两句">
				</view>
			</view>
			<view class="jj">
				<view>
					<image src="../../static/image/消息.png"></image>
				</view>
				<view>
					<image src="../../static/image/_收藏2小.png"></image>
				</view>
				<view>
					<image src="../../static/image/分享.png"></image>
				</view>
			</view>
		
		
		</view>
	</view>
</template>

<script>
</script>

<style>
	.jj input {
		position: relative;
	}
	
	.jj view {
		margin-right: 30rpx;
	}
	
	.jj {
		display: flex;
		justify-content: space-around;
	}
	
	.botton {
		display: flex;
		justify-content: space-around;
		flex-direction: row;
		position: fixed;
		bottom: 0rpx;
		background-color: white;
		width: 100%;
		height: 60rpx;
	}
	
	.botton image {
		height: 42rpx;
		width: 42rpx;
	}
	.z{
		display: flex;
		justify-content: space-between;
		font-size: 24rpx;
		color: rgba(00, 00, 00, 0.5);
	}
	.rog2{
		font-size: 36rpx;
	}
	.rog1 image{
		width: 200rpx;
		height: 200rpx;
	}
	.rog {
		margin: 20rpx;
		display: flex;
	}

	.xian {
		width: 100%;
		margin: 20rpx;
		border: 1rpx #000000 solid;
	}

	.img1 view view {
		margin: 5rpx;
		margin-left: 30rpx;
	}

	.guan button {
		margin-top: 20rpx;
	}

	.img1 {
		display: flex;
	}

	.xi {
		margin: 20rpx;
		margin-top: 30rpx;
		display: flex;
		justify-content: space-between;
	}

	.xi image {
		border-radius: 99rpx;
		width: 120rpx;
		height: 120rpx;
	}

	.pai {
		display: flex;
		justify-content: space-between;
	}

	.zan image {
		width: 36rpx;
		height: 36rpx;
		margin: 20rpx;
	}

	.title {
		margin: 20rpx;
	}

	.bo {
		color: rgba(00, 00, 00, 0.5);
		margin-top: 20rpx;
	}

	.ziRan {
		font-size: 36rpx;
	}
</style>
